<!DOCTYPE html>
<!--
Copyright 2012 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title></title>
    <script src="lib/loader.js"></script>
    <script src="lib/Component.js"></script>
    <style>
      div, g-A, g-B, g-C {
        display: block;
        border: 1px dotted red;
        margin: 8px;
        padding: 8px;
      }
    </style>
    <script>
      change = function() {
        Component.register("g-A", ["Base", "A"]);
        Component.register("g-B", ["Base", "B"]);
        Component.register("g-C", ["Cbb", "Cb", "C"]);
        Component.register("g-D", ["Dbbb", "Dbb", "Db", "D"]);
        Component.register("g-E", ["Eb", "E"]);
        Component.register("g-F", ["F"]);
        //
        Component.upgradeAll();
        //
        B = c$[2];
        B.webkitShadowRoot.olderSubtree.appendChild(document.createTextNode(" Appended to B's Base "));
        B.appendChild(document.createTextNode(" Appended to B "));
      }
    </script>
  </head>
  <body onload="change()">
      <g-A><span>Where am I?</span></g-A>

      <template id="A">[A-&gt;]<g-C><g-B><content></content><content></content></g-B></g-C>
        <g-B><content></content></g-B><g-C><g-B><shadow></shadow></g-B></g-C>[&lt;-A]
      </template>

      <template id="B">[B-&gt;][<content></content>]<shadow></shadow>[&lt;-B]</template>

      <template id="Base">[Base-&gt;]<content></content>[&lt;-Base]</template>

      <template id="C">[C-&gt;]<shadow></shadow>[&lt;-C]</template>
      <template id="Cb"><span>[Cb-&gt;]<shadow></shadow>[&lt;-Cb]</span></template>
      <template id="Cbb">[Cbb-&gt;]<g-D><content></content></g-D>[&lt;-Cbb]</template>


      <template id="D">[D-&gt;]<shadow></shadow>[&lt;-D]</template>
      <template id="Db">[Db-&gt;]<g-E><shadow></shadow></g-E>[&lt;-Db]</template>
      <template id="Dbb">[Dbb-&gt;]<g-E><shadow></shadow></g-E><shadow></shadow>[&lt;-Dbb]</template>
      <template id="Dbbb">[Dbbb-&gt;]<g-E><content></content></g-E>[&lt;-Dbbb]</template>

      <template id="E">[E-&gt;]<g-F><shadow></shadow></g-F>[&lt;-E]</template>
      <template id="Eb">[Eb-&gt;]<g-F><content></content></g-F>[&lt;-Eb]</template>

      <template id="F">[F-&gt;]<content></content>[&lt;-F]</template>

      <hr/>

      Expected output (also, see console):

      <div>[A-&gt;]
        <div>[C-&gt;][Cb-&gt;][Cbb-&gt;][D-&gt;][Db-&gt;][E-&gt;][F-&gt;][Eb-&gt;][F-&gt;][Dbb-&gt;][E-&gt;][F-&gt;][Eb-&gt;][F-&gt;]
          [Dbbb-&gt;][E-&gt;][F-&gt;][Eb-&gt;][F-&gt;]
          <div>[B-&gt;]<span>Where Am I?</span>[Base-&gt;][&lt;-Base][&lt;-B]</div>
        [&lt;-F][&lt;-Eb][&lt;-F][&lt;-E][&lt;-Dbbb][&lt;-F][&lt;-Eb][&lt;-F][&lt;-E][&lt;-Dbb][&lt;-F][&lt;-Eb][&lt;-F][&lt;-E][&lt;-Db][&lt;-D]
          [&lt;-Cbb][&lt;-Cb][&lt;-C]</div>
        <div>[B-&gt;][ Appended to B ][Base-&gt;][&lt;-Base] Appended to B's Base [&lt;-B]</div>
        <div>[C-&gt;][Cb-&gt;][Cbb-&gt;][D-&gt;][Db-&gt;][E-&gt;][F-&gt;][Eb-&gt;][F-&gt;][Dbb-&gt;][E-&gt;][F-&gt;][Eb-&gt;][F-&gt;]
          [Dbbb-&gt;][E-&gt;][F-&gt;][Eb-&gt;][F-&gt;]
          <div>[B-&gt;][[Base-&gt;][&lt;-Base]][Base-&gt;][&lt;-Base][&lt;-B]</div>
          [&lt;-F][&lt;-Eb][&lt;-F][&lt;-E][&lt;-Dbbb][&lt;-F][&lt;-Eb][&lt;-F][&lt;-E][&lt;-Dbb][&lt;-F][&lt;-Eb][&lt;-F][&lt;-E][&lt;-Db][&lt;-D]
        [&lt;-Cbb][&lt;-Cb][&lt;-C]</div>
      [&lt;-A]</div>

</body>
</html>
